{% extends 'encyclopedia/base.html' %}

{% block title %}相机配件列表 - 相机百科{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2 class="text-center mb-4">相机配件列表</h2>
    
    <!-- 搜索和过滤区域 -->
    <div class="row mb-4">
        <div class="col-md-6">
            <form method="get" action="" class="form-inline">
                <input type="text" name="search" placeholder="搜索配件..." value="{{ request.GET.search }}" class="form-control flex-grow-1 mr-2">
                <button type="submit" class="btn btn-primary">搜索</button>
            </form>
        </div>
        <div class="col-md-6 text-right">
            <div class="btn-group">
                <a href="{% url 'encyclopedia:accessory_list' %}" class="btn btn-outline-secondary {% if not request.GET.category %}active{% endif %}">全部</a>
                {% for category in categories %}
                <a href="?category={{ category.id }}" class="btn btn-outline-secondary {% if request.GET.category == category.id|stringformat:'s' %}active{% endif %}">{{ category.name }}</a>
                {% endfor %}
            </div>
        </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="mb-4 text-right">
        <a href="{% url 'encyclopedia:accessory_add' %}" class="btn btn-success">添加配件</a>
        <a href="{% url 'encyclopedia:accessory_category_list' %}" class="btn btn-info ml-2">配件分类</a>
    </div>
    
    <!-- 配件列表 -->
    <div class="row">
        {% if accessories %}
            {% for accessory in accessories %}
            <div class="col-md-4 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title">{{ accessory.title }}</h5>
                        <h6 class="card-subtitle mb-2 text-muted">{{ accessory.brand }} - {{ accessory.category.name }}</h6>
                        {% if accessory.price_range %}
                        <p class="card-text text-success">价格区间：{{ accessory.price_range }}</p>
                        {% endif %}
                        <p class="card-text">{{ accessory.content|truncatechars:100 }}</p>
                        <div class="mt-3">
                            <a href="{% url 'encyclopedia:accessory_detail' accessory.pk %}" class="btn btn-primary btn-sm">查看详情</a>
                            <a href="{% url 'encyclopedia:accessory_edit' accessory.pk %}" class="btn btn-secondary btn-sm ml-1">编辑</a>
                            <a href="{% url 'encyclopedia:accessory_delete' accessory.pk %}" class="btn btn-danger btn-sm ml-1">删除</a>
                        </div>
                    </div>
                    <div class="card-footer text-muted text-sm">
                        创建于: {{ accessory.created_at|date:"Y-m-d H:i" }}
                        {% if accessory.updated_at != accessory.created_at %}
                        更新于: {{ accessory.updated_at|date:"Y-m-d H:i" }}
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        {% else %}
        <div class="col-12">
            <div class="alert alert-info text-center" role="alert">
                暂无配件数据
            </div>
        </div>
        {% endif %}
    </div>
    
    <!-- 分页 -->
    {% if is_paginated %}
    <div class="pagination justify-content-center mt-4">
        <span class="step-links">
            {% if page_obj.has_previous %}
                <a href="?page=1">&laquo; 首页</a>
                <a href="?page={{ page_obj.previous_page_number }}">上一页</a>
            {% endif %}

            <span class="current">
                第 {{ page_obj.number }} 页，共 {{ page_obj.paginator.num_pages }} 页
            </span>

            {% if page_obj.has_next %}
                <a href="?page={{ page_obj.next_page_number }}">下一页</a>
                <a href="?page={{ page_obj.paginator.num_pages }}">末页 &raquo;</a>
            {% endif %}
        </span>
    </div>
    {% endif %}
</div>
{% endblock %}